<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>map-demo</title>
        <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
        <script type="text/javascript" src="./inflate.min.js"></script>
        <script type="text/javascript" src="./OrbitControls.js"></script>
        <script type="text/javascript" src="./WebGL.js"></script>
        <script type="text/javascript" src="./stats.min.js"></script>
        <style type="text/css">
            
            html,body {
                width: 100%;
                height: 100%;
                padding: 0px;
                margin: 0px;
            }

            div#canvas-frame {
                padding: 0px;
                margin: 0px;
                border: none;
                cursor: pointer;
                width: 100%;
                height: 100%;
                background-color: #EEEEEE;
                overflow: hidden;
            }
        </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera,controls;
            function initCamera() {
                //参考 https://www.cnblogs.com/v-weiwang/p/6072235.html 
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                //相机的位置
                camera.position.x = 0;
                camera.position.y = 1400;
                camera.position.z = 0;
                //相机以哪个方向为上方
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                //相机看向哪个坐标
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });

                controls = new THREE.OrbitControls( camera );

                controls.target.set( 0, 100, 0 );
                controls.update();
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                light.position.set(100, 100, 200);
                scene.add(light);
            }

            var cube;
            function initObject() {
                var geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

                for ( var i = 0; i <= 20; i ++ ) {
                    //下层网
                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1 } ) );
                    line.position.z = ( i * 50 ) - 500;
                    scene.add( line );

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1 } ) );
                    //canvas里的角度是以PI（π）为单位的，Math.PI就是圆周率3.14
                    //PI就是圆周率π，PI是弧度制的π,也就是180°
                    //所以，Math.PI = 3.14 = 180°
                    line.rotation.y = 90 * Math.PI / 180;
                    line.position.x = ( i * 50 ) - 500;
                    scene.add( line );
                    //上层网
                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1 } ) );
                    line.position.z = ( i * 50 ) - 500;
                    line.position.y = 50;
                    scene.add( line );
                    
                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1 } ) );
                    //canvas里的角度是以PI（π）为单位的，Math.PI就是圆周率3.14
                    //PI就是圆周率π，PI是弧度制的π,也就是180°
                    //所以，Math.PI = 3.14 = 180°
                    line.rotation.y = 90 * Math.PI / 180;
                    line.position.x = ( i * 50 ) - 500;
                    line.position.y = 50;
                    scene.add( line );
                }
                
                var geometryY = new THREE.Geometry();
                geometryY.vertices.push( new THREE.Vector3( 0, 50, 0 ) );
                geometryY.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
                
                let z = -500;
                for (var j = 0; j <= 20; j ++){
                    
                    for ( var i = 0; i <= 20; i ++ ) {
                        var line = new THREE.Line( geometryY, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1 } ) );
                        line.position.x = ( i * 50 ) - 500;
                        line.position.z = z;
                        scene.add( line );
                    }
                    z = z+50;
                }
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.clear();
                render();
            }

            function render() {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>